<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 350px;
            margin: 30px auto;
            background: #eee;
            padding: 30px 50px;
        }

        ul {
            padding-left: 0;
        }

        li {
            list-style: none;
        }

        .add {
            width: 200px;
            height: 20px;
            margin-right: 10px;
        }

        .span1 {
            color: skyblue;
        }

        .finish {
            color: #ccc;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <!-- 
        思路：分析对象      任务项目
              找共性       属性？   任务名称,完成状态
            1. 实现页面基本布局,根据数据渲染出来。  -- 查询
            2. 计算总数,未完成数
            3. 实现“完成”   -- 删除
            4. 实现添加     -- 增加
            5. 实现编辑     -- 编辑
     -->
    <div id="box">
        <h1>任务列表</h1>
        <p>任务总数：{{arr.length}}；还有：{{choose()}}未完成；【<span class="span1" @click="finish()">完成</span>】</p>
        <ul>
            <li v-for="(item,index) in arr" v-bind:class="{finish:item.bol}">
                <input type="checkbox" v-model="item.bol">
                <!-- <span>{{item}}</span> -->
                <span v-text="item.des" v-show="!item.edit" @click="edit(index)"></span>
                <input type="text" v-model="item.des" v-show="item.edit" @blur="item.edit=false">
            </li>
        </ul>
        <input type="text" class="add" v-model="msg"><button @click="add()">添加</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {
                arr: [
                    // 每条数据中应该有数据的内容 和 数据的状态 编辑的状态
                    { des: '设计', bol: false, edit: false },
                    { des: '编写页面代码', bol: false, edit: false },
                    { des: '编写js代码', bol: false, edit: false },
                    { des: '设计产品原型', bol: false, edit: false }
                ],
                msg: ""
            },
            methods: {
                // 实现添加     -- 增加
                add: function () {
                    // body...
                    // 添加arr数据
                    this.arr.push({ des: this.msg, bol: false , edit:false});
                    this.msg = "";
                },
                // 未完成数
                choose: function () {
                    // body...
                    // 对所有数组中的元素进行遍历，查看bol
                    // 如果bol为false是未完成的;
                    // 如果bol为true是已完成的;
                    let num = 0; // 未完成任务的数量
                    this.arr.forEach(item => {
                        // body...
                        if (!item.bol) { // 当前任务未完成
                            // 增加未完成任务的数量
                            num++;
                        }
                    });
                    return num;
                },
                // 实现“完成”   -- 删除
                finish: function () {
                    // body...
                    // 对所有数据进行遍历，如果已经完成，将其删除掉
                    // 先将arr清空；遍历；将未完成的数据，重新添加进来
                    let temp = this.arr; // 新数组 在清空arr前，先将arr中的数据，保存在临时变量中
                    this.arr = [];  // 清空
                    // for (let i = 0; i < temp.length; i++) {
                    //     if (!temp[i].bol) {
                    //         this.arr.push(temp[i]); 
                    //     }
                    // }
                    temp.forEach(item=>{
                        // 为false重新添加到arr里面去
                        if(!item.bol){
                            this.arr.push(item)
                        }
                    })
                },
                edit: function (i) {
                    // body...
                    // 需要判断一下,当前的数据是否已完成
                    // 如果是已完成的状态，那么不能对数据进行更改
                    // 如果是未完成的状态,才可以 改变其edit
                    // 更改 edit 值，改为 true;
                    console.log(1);
                    if(this.arr[i].bol){
                        return
                    }
                    this.arr[i].edit = true;
                   
                }
            }
        })
    </script>
</body>

</html>